<head>
    <style>
        body {
            width: {{style.width}}px;
            background: #f8f9fa;
            padding: 20px;
            font-family: 'Microsoft YaHei',
            sans-serif;
        }

        .container {
            display: grid;
            grid-template-columns: {{style.gridTemplateColumns}};
            gap: 15px;
            justify-items: center;
        }

        .item {
            width: 180px;
            background: white;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }

        .item:hover {
            transform: translateY(-2px);
        }

        .plot-number {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 8px;
        }

        .crop-info {
            color: #34495e;
            line-height: 1.6;
        }

        .time-info {
            color: #e67e22;
            margin-top: 5px;
        }

        .harvest-info {
            color: #16a085;
            margin-top: 5px;
        }

        .fertilizer-info {
            color: #27ae60;
            margin-top: 5px;
            padding: 4px 8px;
            background: #f0f9f4;
            border-radius: 4px;
            display: inline-block;
        }

        .empty-plot {
            color: #95a5a6;
            font-style: italic;
        }

        .status-growing {
            border-left: 4px solid #3498db;
        }

        .status-mature {
            border-left: 4px solid #27ae60;
        }

        .status-empty {
            border-left: 4px solid #95a5a6;
        }
    </style>
</head>

<body>
    <div class="container">
        {{each info item}}
        <div class="item status-{{item.status}}">
            <div class="plot-number">格子【{{item.number}}】</div>
            <div class="crop-info">
                {{if item.name}}
                种植作物: {{item.name}}<br>
                <div class="time-info">{{item.time}}</div>
                <div class="harvest-info">预计收获: {{item.harvest}}个</div>
                {{if item.fertilizer}}
                <div class="fertilizer-info">已施肥: {{item.fertilizer}}</div>
                {{/if}}
                {{else}}
                <div class="empty-plot">暂未种植</div>
                {{/if}}
            </div>
        </div>
        {{/each}}
    </div>
</body>